<template>
  <div class="follow-main">
    <div class="follow-header follow-header-info">
      <div class="breadcrumb flex-c-s">
        <p class="item cur">修改信息</p>
      </div>
    </div>
    <div class="edit-content section">
      <div class="content" style="padding-bottom: 10px">
        <div class="row">
          <span class="title">用户名: </span>
          <input v-model="userInfo.name" type="text" />
        </div>
        <div class="row textarea">
          <span class="title">个人描述: </span>
          <textarea
            placeholder="✨描述一下帅气又有魅力的自己吧✨"
            v-model="userInfo.description"
            maxlength="150"
          ></textarea>
          <span class="word-count">
            {{ userInfo.description?.length || 0 }} / 150
          </span>
        </div>
        <div class="row">
          <span class="title">邮箱:</span>
          <input v-model="userInfo.email" type="email" />
        </div>
        <div class="row">
          <span class="title">手机号:</span>
          <input v-model="userInfo.phone" type="text" />
        </div>
        <div class="row avatar">
          <span class="title">头像:</span>
          <img
            v-if="userInfo.avatarFile"
            :src="getFileUrl(userInfo.avatarFile)"
          />
          <xz-upload-area
            @click="uploadButtonRef?.click()"
            @upload="handleUpload"
            class="upload-area"
            v-else
          >
            <i class="xzfont icon-upload"></i>
            <p>点击/拖拽上传文件</p>
            <input
              @change="handleUploadFile"
              type="file"
              ref="uploadButtonRef"
              style="display: none"
            />
          </xz-upload-area>
        </div>
        <div class="row action">
          <button @click="handleSubmitInfo" class="but jb-pink">
            提交信息
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { updateUserInfo } from "@/api/user";
import { uploadFile } from "@/utils/file";
import userStore from "@/store/user";
import { message } from "@/utils/message";

const store = userStore();

const uploadButtonRef = ref<HTMLInputElement>();

const userInfo = ref<UserInfoForm>({
  name: store.userInfo?.name,
  description: store.userInfo?.description,
  email: store.userInfo?.email,
  phone: store.userInfo?.phone,
  avatar: store.userInfo?.avatar,
  avatarFile: undefined,
});

const handleSubmitInfo = async () => {
  if (userInfo.value.avatarFile) {
    const result = await uploadFile(userInfo.value.avatarFile);
    if (result) {
      userInfo.value.avatar = result.data.data;
    }
  }
  const result = await updateUserInfo(userInfo.value);
  if (result.data.code === 200) {
    message({
      type: "success",
      duration: 2000,
      message: "修改成功",
    });
    location.reload();
  }
};

const handleUpload = (fileList: FileList) => {
  if (fileList.length) {
    const file = fileList[0];
    if (file.type.startsWith("image")) {
      userInfo.value.avatarFile = file;
    }
  }
};

const getFileUrl = (file: File) => {
  return URL.createObjectURL(file);
};

const handleUploadFile = (e: Event) => {
  const target = e.target as HTMLInputElement;
  if (target.files) {
    const file = target.files[0];
    if (file.type.startsWith("image")) {
      userInfo.value.avatarFile = file;
    }
  }
};
</script>

<style scoped lang="scss">
.edit-content {
  padding: 2rem;

  .row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;

    &.textarea {
      align-items: start;
    }

    &.avatar {
      img {
        width: 120px;
        height: 120px;
      }
    }

    &.action {
      justify-content: center;
    }

    .title {
      margin-right: 1rem;
      width: 80px;
    }

    .upload-area {
      height: 120px;
      width: 120px;
    }

    input {
      min-height: 34px;
      min-width: 350px;
      display: block;
      padding: 6px 12px;
      font-size: 16px;
      line-height: 1.4;
      border-radius: 4px;
      border: var(--style-border);
      background: var(--xz-card-bg);
      outline: none;
      color: var(--xz-fontcolor);

      &:hover {
        border: var(--style-border-hover);
      }

      &:focus {
        border: var(--style-border-hover);
        box-shadow: 0 0 1px 2px var(--xz-theme);
      }
    }

    textarea {
      background-color: var(--xz-card-bg);
      border-color: rgba(144, 147, 153, 0.31) !important;
      color: currentColor;
      display: block;
      resize: vertical;
      line-height: 1.5;
      box-sizing: border-box;
      width: 100%;
      font-size: inherit;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      border-radius: 12px;
      min-height: 100px;
      padding: 16px 16px 40px 16px;
      overflow: auto;
      border: 1px solid #dcdfe6;
      height: auto;

      &:focus {
        outline: 0;
        border: var(--style-border-hover);
        box-shadow: 0 0 1px 2px var(--xz-theme);
      }
    }

    .word-count {
      position: absolute;
      font-size: 12px;
      bottom: 5px;
      right: 10px;
      color: currentColor;
      background: transparent;
    }
  }
}

.upload-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  i {
    color: var(--xz-theme);
    font-size: 25px;
  }

  p {
    font-size: 12px;
  }
}

.cover-container {
  height: 60px;
  widows: 60px;
  margin-right: 20px;
}
</style>
